<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="/mvc-demo08/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
	$(function() {
		$.ajax({
			url : "/mvc-demo08/emp/loadDatas",
			type : "GET",
			dataType : "JSON",
			success : function(data) {
				console.log(data);
				var depts = data.depts;
				var mgrs = data.mgrs;
				//刷新部门数据
				for (var i = 0; i < depts.length; i++) {
					var dept = depts[i];
					var $op = $("<option value='"+dept.deptno+"'>" + dept.dname
							+ "</option>");
					$("#dept-sel").append($op);
				}
				//刷新经理数据
				for (var i = 0; i < mgrs.length; i++) {
					var mgr = mgrs[i];
					var $op = $("<option value='"+mgr.empno+"'>" + mgr.ename
							+ "</option>");
					$("#mgr-sel").append($op);
				}
			},
			error : function(error) {
				alert("获取数据失败");
			}

		});

		$("#btn").on("click", function() {
			//表单验证
			//姓名 2~4个汉字
			var ename = $("form input[name=ename]").val();
			//ename
			ename = ename.trim();
			if (ename === "" || ename == null) {
				$("#ename-msg").html("姓名不能为空").css({
					"color" : "red"
				});
				return;
			}
			//创建正则对象
			var reg = /^[\u4e00-\u9fa5]{0,}$/;
			if (!reg.test(ename)) {
				//提示错误信息
				$("#ename-msg").html("合法姓名是2~4个汉字").css({
					"color" : "red"
				});
				return;
			}
			//用户名验证通过
			$("#ename-msg").html("OK").css({
				"color" : "green"
			});
			//合法年龄18~65
			var eage = $("form input[name=eage]").val();
			eage = eage.trim();//去掉左右的空格
			if (eage === "" || eage == null) {
				$("#eage-msg").html("年龄不能为空").css({
					"color" : "red"
				});
				return;
			}
			//年龄不能为非数字
			if (isNaN(eage)) {
				$("#eage-msg").html("年龄不能非数字").css({
					"color" : "red"
				});
				return;
			}
			if (eage<18 || eage>65) {
				$("#eage-msg").html("合法年龄是18~65").css({
					"color" : "red"
				});
				return;
			}
			$("#eage-msg").html("OK").css({
				"color" : "green"
			});
			//合法薪资3000~5000
			var esalary = $("form input[name=esalary]").val();
			esalary = esalary.trim();
			if (esalary === "" || esalary == null) {
				$("#esalary-msg").html("薪资不能为空").css({
					"color" : "red"
				});
				return;
			}
			if (isNaN(esalary)) {
				$("#esalary-msg").html("薪资不能为非数字").css({
					"color" : "red"
				});
				return;
			}

			if (esalary<3000 || esalary>50000) {
				$("#esalary-msg").html("合法薪资3000~5000").css({
					"color" : "red"
				});
				return;
			}

			//全部验证通过，才能提交表单

			//提交表单
			$.ajax({
				url : "/mvc-demo08/emp",
				type : "POST",
				dataType : "TEXT",
				data : $("#addForm").serializeArray(),
				success : function(data) {
					if (data === "OK") {
						location.href = "/mvc-demo08/view/ListEmp.html";
					}

				},
				error : function(error) {
					alert("添加数据失败...");
				}
			});
		});

	});
</script>
</head>
<body>
	<form id="addForm">
		姓名:<input name="ename" /> <br /> 性别:<label> <input
			type="radio" name="esex" value="男" checked /> 男
		</label> <label> <input type="radio" name="esex" value="女" /> 女
		</label> <br /> 年龄:<input name="eage" /> <br /> 薪资:<input name="esalary" /> <br />
		部门:<select name="dept.deptno" id="dept-sel">

		</select> <br /> 经理: <select name="mgr.empno" id="mgr-sel">

		</select> <br /> <input type="button" value="添加员工" id="btn" />
	</form>
</body>
</html>